<template>
  <div class="login-container">
    <h2>用户登录</h2>
    <form @submit.prevent="handleLogin">
      <div>
        <label>用户名：</label>
        <input v-model="username" required />
      </div>
      <div style="position:relative;display:flex;align-items:center;">
        <label>密码：</label>
        <input :type="showPwd ? 'text' : 'password'" v-model="password" required style="flex:1;" />
        <span class="eye-icon" @mousedown.prevent="showPwd=true" @mouseup.prevent="showPwd=false" @mouseleave="showPwd=false" @touchstart.prevent="showPwd=true" @touchend.prevent="showPwd=false">
          <svg v-if="showPwd" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z" fill="#ff6600"/><circle cx="12" cy="12" r="2.5" fill="#fff"/></svg>
          <svg v-else width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 5C7 5 2.73 8.11 1 12c1.73 3.89 6 7 11 7s9.27-3.11 11-7c-1.73-3.89-6-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z" fill="#aaa"/><circle cx="12" cy="12" r="2.5" fill="#fff"/></svg>
        </span>
      </div>
        <div class="btn-row">
          <button type="submit">登录</button>
          <button type="button" @click="goRegister">注册</button>
        </div>
        <div v-if="error" class="error">{{ error }}</div>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from '../api/axios';
import { useRouter } from 'vue-router';

const username = ref('');
const password = ref('');
const showPwd = ref(false);
const error = ref('');
const router = useRouter();

const handleLogin = async () => {
  error.value = '';
  try {
    const res = await axios.post('/auth/login', {
      username: username.value,
      password: password.value,
    });
    localStorage.setItem('token', res.data.token);
    // 自动保存 userId，兼容用户中心页面
    if (res.data.userId) {
      localStorage.setItem('userId', res.data.userId);
    }
    router.push('/');
  } catch (e: any) {
    error.value = e.response?.data || '登录失败';
  }
};

const goRegister = () => {
  router.push('/register');
};
</script>

<style scoped>
  .login-container {
    max-width: 400px;
    margin: 48px auto;
    padding: 32px 32px 24px 32px;
    border-radius: 16px;
    box-shadow: 0 4px 24px #ffe7ba;
    background: #fffbe6;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  h2 {
    text-align: center;
    color: #223344;
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 32px;
  }
  form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  form > div {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    width: 100%;
  }
  label {
    width: 90px;
    text-align: right;
    font-size: 1.1rem;
    color: #223344;
    margin-right: 12px;
  }
  input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #ffd591;
    font-size: 1rem;
    background: #fff;
    transition: border 0.2s;
  }
  input:focus {
    border-color: #ff6600;
    outline: none;
  }
  .btn-row {
    display: flex;
    gap: 18px;
    justify-content: center;
    margin-top: 12px;
    width: 100%;
  }
  .btn-row button {
    background: #ff6600;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 32px;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 2px 8px #ffd591;
    cursor: pointer;
    transition: background 0.2s;
  }
  .btn-row button:hover {
    background: #ff8500;
  }
  .error {
    color: #ff3c00;
    margin-top: 10px;
    font-size: 1rem;
    text-align: center;
  }
</style>
